<template>
  <div>
    <a-list item-layout="horizontal" :size="small" :split="false" :data-source="noteList" style="width: 97%;margin: 0 auto;">
      <a-list-item slot="renderItem" slot-scope="item, index">
        <div class="todo-text">
          <a-icon type="sound" :style="{fontSize: '13px',color: '#0092FC',marginRight: '5px'}" />
          {{item.title}}
        </div>
        <div class="todo-time">
          {{item.time}}
        </div>
        <div class="todo-status" :class="{'error':item.status=='未读','over':item.status=='已读'}">
          {{item.status}}
        </div>
      </a-list-item>
    </a-list>
  </div>
</template>
<script>
import {req} from "../../../api/axiosFun";

export default {
  data() {
    return{
      noteList:[
        {
          'todoId':1,
          'title': '来料PCB(XA03J-2.21MT)已检，来料PCB(XA03J-2.21MT)已检，',
          'time': '17:20',
          'status': '未读'
        },
        {
          'todoId':2,
          'title': '来料PCB(XA03J-2.21MT)已检',
          'time': '09-15',
          'status': '未读'
        },
        {
          'todoId':3,
          'title': '来料PCB(XA03J-2.21MT)已检',
          'time': '09-14',
          'status': '未读'
        },
        {
          'todoId':4,
          'title': '来料PCB(XA03J-2.21MT)已检',
          'time': '09-13',
          'status': '未读'
        },
        {
          'todoId':5,
          'title': '来料PCB(XA03J-2.21MT)已检',
          'time': '09-12',
          'status': '已读'
        },
      ],
    }
  },
  mounted() {
    this.getTodoList()
  },
  methods:{
    //异常待解决问题
    getTodoList() {
      req('post', `dataBoard/getTodoList`)
        .then(res => {
          if (res.result === 'success') {
            // this.abnormalList = res.data
          }
        })
    },
  }
}
</script>
<style scoped>
@import "../../../assets/css/maincss.css";
/deep/ .ant-list-item {
  font-size: calc(100vw * 14 / 1920);
}
.todo-text {
  flex: 1;
  width: 0;
  margin-right: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.todo-status {
  margin-left: 10px;
}
</style>
